<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div>div 标签</div>
  <input type="text">

  <!-- 
    先找  然后再操作
    1.点击事件
    2.鼠标移入鼠标移出事件
    3.键盘事件(抬起和按下)
    4.获取焦点,失去焦点事件
    5.表单value值发生改变
  -->

  <script>
    const div = document.querySelector('div')

    // 1. 点击事件
    div.addEventListener('click', function () {
      console.log('点击事件被触发了')
      // 箭头函数this指向外层作用域，不是当前点击对象
      this.style.backgroundColor = 'green'
    })

    // 2. 鼠标移入和离开
    div.addEventListener('mouseenter', function () {
      this.style.backgroundColor = 'green'
    })
    div.addEventListener('mouseleave', function () {
      this.style.backgroundColor = 'pink'
    })


    const text = document.querySelector('input')
    // 3. 键盘按下和弹起
    // text.addEventListener('keydown', function(e) {
    //   console.log(e.key)
    // })

    // 4. input监听value值改变
    // 需求:  输入框输入的内容是否是邮箱  是邮箱则弹窗  不是邮箱则红框提示
    text.addEventListener('input', function () {
      console.log(this.value)
      const text = document.querySelector('input');

      const emailRegex = /^\w+([-+.]\w+)*@\w+([-+.]\w+)*\.\w+([-+.]\w+)*$/;
      //邮箱的正则表达式
      const email = this.value;

      if (emailRegex.test(email)) {
        alert(this.value)
      } else {
        this.style.borderColor = 'red'; // 红框提示
      }
    });
  </script>
</body>

</html>